import React, { useState } from "react";
import { RightOutlined, LeftOutlined } from "@ant-design/icons";
import "@/layouts/Recommended.css";
function Activity() {
  const list = [
    {
      img: "../src/images/card1.png",
    },
    {
      img: "../src/images/card2.png",
    },
    {
      img: "../src/images/card3.png",
    },
    {
      img: "../src/images/card4.png",
    },
    {
      img: "../src/images/card5.png",
    },
    {
      img: "../src/images/card6.png",
    },
    {
      img: "../src/images/card7.png",
    },
  ];
  const [position, setPosition] = useState(0); // 初始位置为0
  const [hideLeftButton, setHideLeftButton] = useState(true); // 控制左侧按钮是否隐藏
  const [hideRightButton, setHideRightButton] = useState(false); // 控制右侧按钮是否隐藏

  // 向左移动
  const moveLeft = () => {
    if (!hideLeftButton) {
      setPosition(position + 400);
      setHideRightButton(false);
      if (position <= 0) {
        // 假设回到初始位置时显示左侧按钮
        setHideLeftButton(true);
      }
    }
  };

  // 向右移动
  const moveRight = () => {
    if (!hideRightButton) {
      setPosition(position - 400); // 假设每次移动10px
      setHideLeftButton(false);
      if (position <= 0) {
        // 假设移动到-10px时隐藏右侧按钮
        setHideRightButton(true);
      }
    }
  };

  // 应用样式
  const style = {
    transform: `translateX(${position}px)`, // 使用transform来移动元素
  };
  return (
    <div className="box">
      <div className="Activity">
        <div className="Act" style={style}>
          {list.map((item, index) => {
            return <img key={index} src={item.img} />;
          })}
        </div>
      </div>
      {!hideLeftButton && (
        <span className="Left bom" onClick={moveLeft}>
          <LeftOutlined />
        </span>
      )}
      {!hideRightButton && (
        <span className="Right bom" onClick={moveRight}>
          <RightOutlined />
        </span>
      )}
    </div>
  );
}

export default Activity;
